<template>
  <div class="padding-15">
    <el-tooltip class="item" effect="dark" :disabled="hasTooltip" placement="bottom-start">
      <div class="flex align-center">
        <span class="font-size-16 font-weight-700">{{ title }}</span>
        <span v-tooltip="title" class="question-box margin-left-5">?</span>
        <span class="font-size-22 font-weight-700 padding-left-15 price-txt"> {{ model.practicalAmount | moneyFilterNoUnit }}</span>
      </div>
      <div slot="content">
        <div style="line-height: 30px" v-html="tips"></div>
      </div>
    </el-tooltip>
    <div class="flex align-center padding-top-10">
      <span v-if="type == 2" class="color-666666">年度计划：{{ model.yearAmount | moneyFilterNoUnit }}</span>
      <span v-else class="color-666666">计划数据：{{ model.planAmount | moneyFilterNoUnit }}</span>
      <span class="padding-left-50 color-666666">偏差：</span>
      <span v-if="arrowShow" :class="colorClass">{{ deviationRate > 0 ? '+' : '-' }}{{ Math.abs(deviationRate || 0) | accMul }}%</span>
      <span class="color-666666" v-else>{{ deviationRate }}</span>
    </div>

    <div class="bar-box relative-box full-box margin-bottom-10 margin-top-20">
      <div class="bar top-bar margin-bottom-5" :style="[{ width: widthTopBar + 'px' }]"></div>
      <div class="bar bottom-bar" :style="[{ width: widthBottomBar + 'px' }]"></div>
      <div class="bar deviation-bar absolute-box" v-if="showDiff" :class="colorDeviationBar" :style="[{ width: Math.abs(widthDeviationBar) + 'px' }, { left: leftDeviationBar + 'px' }]"></div>
      <div class="cut-line absolute-box" v-if="showDiff" :style="[{ left: leftLine + 'px' }]"></div>
    </div>

    <div v-if="showDiff" class="padding-top-10">
      <span class="color-666666">年度计划：</span>
      <span class="color-666666">{{ model.yearAmount || 0 | moneyFilterNoUnit }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      //是收入还是支出
      isIncome: {
        type: Boolean,
        default: true,
      },
      //是否展示偏差的box
      showDiff: {
        type: Boolean,
        default: false,
      },
      //标题
      title: {
        type: String,
        default: '',
      },
      //数据对象
      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
      tips: {
        type: String,
        default: '',
      },
      //tips是否禁止
      hasTooltip: {
        type: Boolean,
        default: true,
      },
      //等于2是全年收入 支出
      type: {
        type: Number,
        default: 1,
      },
    },

    computed: {
      colorDeviationBar() {
        if (this.isIncome) {
          return this.widthDeviationBar > 0 ? 'bg-good' : 'bg-bad';
        } else {
          return this.widthDeviationBar > 0 ? 'bg-bad' : 'bg-good';
        }
      },
      deviationRate() {
        if (this.model.practicalAmount == 0 && this.model.planAmount == 0) {
          this.arrowShow = false;
          return '--';
        } else if (Number(this.model.practicalAmount) != 0 && this.model.planAmount == 0) {
          this.arrowShow = false;
          return '计划外';
        } else {
          this.arrowShow = true;
          return this.model.deviationRate;
        }
      },
      colorClass() {
        if (this.isIncome) {
          return this.deviationRate > 0 ? 'color-green' : 'color-red';
        } else {
          return this.deviationRate > 0 ? 'color-red' : 'color-green';
        }
      },
    },

    data() {
      return {
        widthTopBar: 100, //上面的bar宽度
        widthBottomBar: 190, //下面的bar宽度
        widthDeviationBar: 0, //小块的宽度
        leftDeviationBar: 0, //小块的left偏移量
        leftLine: 0, //完成度线的left偏移量
        arrowShow: false,
      };
    },

    watch: {
      model: {
        deep: true,
        handler(val) {
          this.initBar();
        },
      },
    },

    methods: {
      initBar() {
        let baseWidth = document.getElementsByClassName('bar-box')[0].clientWidth; //宽度的基数
        let baseNum = this.model.yearAmount > this.model.practicalAmount ? this.model.yearAmount : this.model.practicalAmount; //比较全年的和实际完成的值大小，取大值为百分比基数
        baseNum = this.model.planAmount > baseNum ? this.model.planAmount : baseNum
        this.widthTopBar = this.type == 1 ? (this.model.planAmount / baseNum) * baseWidth : (this.model.practicalAmount / baseNum) * baseWidth; //上面的bar宽度
        this.widthBottomBar = (this.model.yearAmount / baseNum) * baseWidth; //下面的bar宽度
        this.widthDeviationBar = ((this.model.practicalAmount - this.model.planAmount) / baseNum) * baseWidth; //小块的宽度 完成 - 计划 的差值
        //当差值 > 0 和 实际完成 >= 全年 的时候，为了展示差值盒子，所以减去差值盒子宽度
        // if (this.showDiff && this.widthDeviationBar > 0 && (this.model.practicalAmount == this.model.yearAmount || this.model.practicalAmount > this.model.yearAmount)) {
        //   this.widthTopBar = this.widthTopBar - Math.abs(this.widthDeviationBar);
        //   this.widthBottomBar = this.widthBottomBar - Math.abs(this.widthDeviationBar);
        // }
        this.leftLine = this.widthTopBar - 1; //完成度线的left偏移量
        this.leftDeviationBar = this.widthDeviationBar > 0 ? this.widthTopBar : this.widthTopBar - Math.abs(this.widthDeviationBar); //小块的left偏移量
      },
    },

    mounted() {},

    components: {},
  };
</script>

<style lang="scss" scoped>
  .bar {
    height: 15px;
  }
  .top-bar {
    background: #4e9475;
  }
  .bottom-bar {
    background: #94f2f5;
  }
  .deviation-bar {
    top: 0;
  }
  .cut-line {
    width: 2px;
    height: 35px;
    background: #000;
    top: 0;
  }
  .bg-bad {
    background: #ff7a81;
  }
  .bg-good {
    background: #3feda0;
  }
</style>
